<template>
    <div>
        <h1>房型修改</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">商铺名称</td>
                    <td><input type="text" v-model="info.Name"></td>
                </tr>
                <tr>
                    <td align="right">商铺楼层</td>
                    <td>
                        <select v-model="info.ShopLX">
                            <option value="">请选择</option>
                            <option value="1楼">1楼</option>
                            <option value="2楼">2楼</option>
                            <option value="3楼">3楼</option>
                            <option value="4楼">4楼</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">商铺编号</td>
                    <td><input type="text" v-model="info.ShopBH"></td>
                </tr>
                <tr>
                    <td align="right">建筑面积</td>
                    <td><input type="text" v-model="info.ShopMJ"></td>
                </tr>
                <tr>
                    <td align="right">租金</td>
                    <td><input type="text" v-model="info.Money"></td>
                </tr>
                <tr>
                    <td align="right">手机号</td>
                    <td><input type="text" v-model="info.Tel"></td>
                </tr>
                <tr>
                    <td align="right">商铺状态</td>
                    <td><select v-model="info.ZTId">
                            <option value="">请选择</option>
                            <option :value="itme.Id" v-for="itme in lisr" :key="itme.Id">{{ itme.ShopName }}</option>
                        </select></td>
                </tr>
                <tr>
                    <td align="right">备注说明</td>
                    <td>
                        <textarea v-model="info.ShopBZ"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="修改" @click="ok"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
let info: any = reactive({
    Td: route.query.id,
    Name: '',
    ShopLX: '',
    ShopBH: '',
    ShopMJ: '',
    Money: '',
    Tel: '',
    ZTId: '',
    ShopBZ: '',
})

let lisr: any = ref([]);
onMounted(() => {
    getlisr();
    getFind();
});


const getlisr = () => {
    axios({
        url: '/api/FX/GetShou',
        method: 'get'

    })
        .then((res) => {
            console.log(res);
            lisr.value = res.data

        })
        .catch((err) => {
            console.log(err);

        })
}
//=============================修改
const ok = () => {
    if (info.Name == "") {
        alert('商铺名称不能为空')
        return;
    }
    if (info.ShopLX == "") {
        alert('商铺楼层不能为空')
        return;
    }
    if (info.ShopBH == "") {
        alert('商铺编号不能为空')
        return;
    }
    if (info.ShopMJ == "") {
        alert('建筑面积不能为空')
        return;
    }
    if (info.Money == "") {
        alert('租金不能为空')
        return;
    }
    if (info.Tel == "") {
        alert('联系电话为有效电话')
        return;
    }
    if (info.ZTId == "") {
        alert('商铺状态不能为空')
        return;
    }
    if (info.ShopBZ == "") {
        alert('备注说明不能为空')
        return;
    }

    axios({
        url: '/api/FX/update',
        method: 'post',
        data: info
    })
        .then((res) => {
            console.log(res);
            if (res.data == -1) {
                alert("手机号重复")
            }
            if (res.data > 0) {
                alert('修改成功')
                router.push('/show')
                return;
            }
            else {
                alert('修改失败')
                return;
            }
        })
        .catch((err) => {
            console.log(err);

        })
}



//=============================反填
const getFind = () => {
    axios({
        url: '/api/FX/Find',
        method: 'get',
        params: {
            id: route.query.id
        }
    })
        .then((res) => {
            console.log(res);
            Object.assign(info, res.data)

        })
        .catch((err) => {
            console.log(err);

        })
}
</script>

<style scoped></style>